import React  from "react";
import {PureComponent,memo} from '../utils';
const MemoFunctionCounter = memo(FunctionCounter);
const MemoFunctionTitle = memo(FunctionTitle);
class UpdateApp extends React.Component{
    state = {number:0,title:'计数器'}
    render(){
        console.log('UpdateApp render');
        return (
            <div>
                <ClassTitle title={this.state.title}/>
                <ClassCounter number={this.state.number}/>
                <MemoFunctionTitle title={this.state.title}/>
                <MemoFunctionCounter number={this.state.number}/>
                <button onClick={()=>this.setState({number:this.state.number+1})}>+1</button>
                <button onClick={()=>this.setState({number:this.state.number+0})}>+0</button>
            </div>
        )
    }
}
function FunctionCounter(props){
    console.log('FunctionCounter render');
    return <p>FunctionCounter:{props.number}</p>
}
class ClassCounter extends PureComponent{
    render(){
        console.log('ClassCounter render');
        return <p>ClassCounter:{this.props.number}</p>
    }
}
function FunctionTitle(props){
    console.log('FunctionTitle render');
    return <p>FunctionTitle:{props.title}</p>
}
class ClassTitle extends PureComponent{
    render(){
        console.log('Title render');
        return <p>ClassTitle:{this.props.title}</p>
    }
}
export default UpdateApp;